Create a new plugin / add-on in JIRA to set custom CSS and Javascript / JS in all pages

Creating our first JIRA plugin “Hello World”:

enter in C:\atlastutorial
atlas-create-jira-plugin
Enter 1 for JIRA 5
groupId: com.atlassian.tutorial
artifactId: helloworld
version: 1.0-SNAPSHOT
package: com.atlassian.tutorial.helloworld
Press Y to continue

Browse to and open the atlastutorial/helloworld/src/main/resources/atlassian-plugin.xml file

<atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2">
 <plugin-info>
 <description>${project.description}</description>
 <version>${project.version}</version>
 <vendor name="${project.organization.name}" url="${project.organization.url}" />
 <param name="plugin-icon">images/pluginIcon.png</param>
 <param name="plugin-logo">images/pluginLogo.png</param>
 </plugin-info>
 <!-- add our i18n resource -->
 <resource type="i18n" name="i18n" location="helloworld"/>
 
 <!-- add our web resources -->
 <web-resource key="helloworld-resources" name="helloworld Web Resources">
 <dependency>com.atlassian.auiplugin:ajs</dependency>
 
 <resource type="download" name="helloworld.css" location="/css/helloworld.css"/>
 <resource type="download" name="helloworld.js" location="/js/helloworld.js"/>
 <resource type="download" name="images/" location="/images"/>
 <context>helloworld</context>
 </web-resource>
 
 <!-- publish our component -->
 <component key="myPluginComponent" class="com.atlassian.tutorial.helloworld.MyPluginComponentImpl" public="true">
 <interface>com.atlassian.tutorial.helloworld.MyPluginComponent</interface>
 </component>
 
 <!-- import from the product container -->
 <component-import key="applicationProperties" interface="com.atlassian.sal.api.ApplicationProperties" />
 
</atlassian-plugin>

Modify helloworld.js and add inside a piece of code like this: “alert(“Hola!”)”

Modify the tag <context> to active the Javascript in all pages <context>atl.general</context>

To finish: atlas-run

That’s all!

Web Resource Contexts in JIRA

Context	Description
jira.error	Applies to the 500 page and sitemesh error decorators.
jira.admin	Anywhere in the admin section.
jira.general	Applies to every page in JIRA.
jira.popup	Popups such as the userpicker popup.
jira.userprofile	A user’s own profile page.
jira.dashboard	A dashboard page in JIRA.
jira.browse	Applies to all the specific ‘jira.browse’ pages below.
jira.browse.component	The browse components page for a project.
jira.browse.project	The browse project page for a single project.
jira.browse.projects	The browse all projects page.
jira.browse.version	The browse versions page for a project.
jira.view.issue	The view issue page in JIRA.
jira.create.issue (only available in JIRA 4.4 and later)	The create issue page in JIRA.
jira.navigator.advanced	Includes web-resources on the advanced view of the issue navigator
jira.navigator.simple	Includes web-resources on the simple view of the issue navigator
atl.error	Error messages and pages.
atl.dashboard	Dashboard pages.

Sample:


<web-resource name="Resources" key="resources">
<resource name="foo.js" type="download" location="resources/foo.js">
</resource>
<context>jira.userprofile</context>
<context>jira.view.issue</context>
</web-resource>

See more in Atlassian